<template>
  <v-content>
    <section>
      <v-parallax 
        :src="require('assets/img/header.png')" 
        height="600">
        <v-layout
          column
          align-center
          justify-center
          class="white--text"
        >
          <img src="~assets/img/logo.png">
          <h1 class="white--text mb-2 display-1 text-xs-center">Parallax Template</h1>
          <div class="subheading mb-3 text-xs-center">Powered by Vuetify</div>
          <v-btn
            class="blue lighten-2 mt-5"
            dark
            large
            href="/pre-made-themes"
          >
            立 即 体 验
          </v-btn>
        </v-layout>
      </v-parallax>
    </section>

    <section>
      <v-layout
        column
        wrap
        class="my-5"
        align-center
      >
        <v-flex 
          xs12 
          sm4 
          class="my-3">
          <div class="text-xs-center">
            <h2 class="headline">教育，以保证孩子的未来</h2>
            <span class="subheading">
              Cras facilisis mi vitae nunc 
            </span>
          </div>
        </v-flex>
        <v-flex xs12>
          <v-container grid-list-xl>
            <v-layout 
              row 
              wrap>
              <v-flex 
                xs12 
                md3>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon 
                      x-large 
                      class="blue--text text--lighten-2">color_lens</v-icon>
                  </v-card-text>
                  <v-card-title 
                    primary-title 
                    class="layout justify-center">
                    <div class="headline text-xs-center">为什么要学习编程？</div>
                  </v-card-title>
                  <v-card-text>
                    编程正以前所未有的方式和速度影响我们的世界，让孩子了解和掌握的一定的编程知识是迎接未来挑战最有效的方式之一。
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex 
                xs12 
                md3>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon 
                      x-large 
                      class="blue--text text--lighten-2">flash_on</v-icon>
                  </v-card-text>
                  <v-card-title 
                    primary-title 
                    class="layout justify-center">
                    <div class="headline">可视化编程体验</div>
                  </v-card-title>
                  <v-card-text>
                    创新的模块化编程环境，体验式互动学习方法，帮助初学者快速建立学习兴趣，在娱乐中获取知识，随时开始创作。
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex 
                xs12 
                md3>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon 
                      x-large 
                      class="blue--text text--lighten-2">build</v-icon>
                  </v-card-text>
                  <v-card-title 
                    primary-title 
                    class="layout justify-center">
                    <div class="headline text-xs-center">科学完善的教学体系</div>
                  </v-card-title>
                  <v-card-text>
                    基于美国计算机教师协会(CSTA)标准构建的自学习课程体系，鼓励青少年在娱乐中探索计算机科学知识，掌握思考与创造能力。
                  </v-card-text>
                </v-card>
              </v-flex>
              <v-flex 
                xs12 
                md3>
                <v-card class="elevation-0 transparent">
                  <v-card-text class="text-xs-center">
                    <v-icon 
                      x-large 
                      class="blue--text text--lighten-2">build</v-icon>
                  </v-card-text>
                  <v-card-title 
                    primary-title 
                    class="layout justify-center">
                    <div class="headline text-xs-center">来自世界的声音</div>
                  </v-card-title>
                  <v-card-text>
                    如果你愿意工作，努力学习，未来将由你们创造。
                    <p>—— 奥巴马 2013年“编程一小时”演讲</p>
                  </v-card-text>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>
    </section>

    <section>
      <v-parallax 
        :src="require('assets/img/section.jpg')" 
        height="380">
        <v-layout 
          column 
          align-center 
          justify-center>
          <div class="headline white--text mb-3 text-xs-center">Web development has never been easier</div>
          <em>Kick-start your application today</em>
          <v-btn
            class="blue lighten-2 mt-5"
            dark
            large
            href="/pre-made-themes"
          >
            Get Started
          </v-btn>
        </v-layout>
      </v-parallax>
    </section>

    <section>
      <v-container grid-list-xl>
        <v-layout 
          row 
          wrap 
          justify-center 
          class="my-5">
          <v-flex 
            xs12 
            sm4>
            <v-card class="elevation-0 transparent">
              <v-card-title 
                primary-title 
                class="layout justify-center">
                <div class="headline">Company info</div>
              </v-card-title>
              <v-card-text>
                Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. 
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
                Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti. 
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex 
            xs12 
            sm4 
            offset-sm1>
            <v-card class="elevation-0 transparent">
              <v-card-title 
                primary-title 
                class="layout justify-center">
                <div class="headline">Contact us</div>
              </v-card-title>
              <v-card-text>
                Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
              </v-card-text>
              <v-list class="transparent">
                <v-list-tile>
                  <v-list-tile-action>
                    <v-icon class="blue--text text--lighten-2">phone</v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>777-867-5309</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
                <v-list-tile>
                  <v-list-tile-action>
                    <v-icon class="blue--text text--lighten-2">place</v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>Chicago, US</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
                <v-list-tile>
                  <v-list-tile-action>
                    <v-icon class="blue--text text--lighten-2">email</v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>john@vuetifyjs.com</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
  </v-content>
</template>

<script>
export default {}
</script>
